<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写博客</title>

    <!-- 引入自己写的样式 -->
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_edit.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <script src="editor.md/editormd.js"></script>
    <script src="js/sessionTools.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">博客主页</a>
        <a href="blog_draft.html">草稿箱</a>
        <a href="Javascript:exit()">注销</a>
    </div>
    <!-- 编辑框容器 -->
    <div class="blog-edit-container">
        <!-- 标题编辑区 -->
        <div class="title">
            <input type="text" placeholder="在这里写下文章标题" id="title">
            <button id="submit" onclick="mysub()">发布文章</button>
        </div>

        <div class="title">

            <input type="text" placeholder="文章摘要 120 字以内" id="description">
            <button id="save_sub" onclick="mysave()">保存草稿</button>

        </div>

        <!-- 创建编辑器标签 -->
        <div id="editorDiv" oninput="onInputChange()">
            <textarea id="editor-markdown" style="display:none;" ></textarea>
        </div>
    </div>

    <script>
        var editor;
        function initEdit(md) {
            // 编辑器设置
            editor = editormd("editorDiv", {
                // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
                width: "100%",
                // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
                height: "calc(100% - 50px)",
                // 编辑器中的初始内容
                markdown: md,
                // 指定 editor.md 依赖的插件路径
                path: "editor.md/lib/",
                saveHTMLToTextarea: true // 
            });
        }
        initEdit("# 在这里写下一篇博客, 编辑过程中自动保存后可在草稿中继续编辑"); // 初始化编译器的值
        // 提交
        function mysub() {
            // alert(editor.getValue()); // 获取值
            // editor.setValue("#123") // 设置值

            // 1. 获取标签
            var title = jQuery("#title");
            var content = editor.getValue(); // 获取 md 编辑窗口中的内容
            var description = jQuery("#description");

            // 2. 数据校验
            if (title.val().trim() == '') {
                alert("请输入标题 !");
                title.focus();
                return false;
            }

            if (description.val().trim() == "") {
                alert("请简写摘要!");
                description.focus();
                return false;
            }

            // 需要注意 md 中的初始内容如果不删除会无法正确判断
            if (content == null || content == '' || content == '# 在这里写下一篇博客, 编辑过程中自动保存后可在草稿中继续编辑') {
                alert("请编辑正文 !");
                jQuery("#editor-markdown").focus();
                return false;
            }

            // 3. 返回数据给后端, 注意不能返回 uid, 容易被人篡改
            jQuery.ajax({
                url: "/article/add",
                type: "post",
                data: {
                    "title": title.val().trim(),
                    "description": description.val().trim(),
                    "content": content
                },
                success: function (res) {
                    if (res.code == 200 && res.data == 1) {
                        if (confirm("添加成功, 是否继续添加 ?")) {
                            // 重新定向到文章添加页
                            location.href = location.href; // 等同刷新当前页面
                        } else {
                            // 不添加, 跳转到我的文章列表页
                            location.href = "myblog_list1.html";
                        }
                    } else {
                        alert("发布失败 : " + res.msg);
                        return fales;
                    }
                }
            });

        }

        function mysave() {
            // 1. 获取标签内容
            var title = jQuery("#title");
            var content = editor.getValue(); // 获取 md 编辑窗口中的内容
            var description = jQuery("#description");

            // 2. 如果标题未空, 默认设置为 "无标题"
            if (title.val().trim() == "") {
                title.html('无标题');
            }
            if (description.val().trim() == "") {
                description.html('暂无摘要');
            }
            // 需要注意 md 中的初始内容如果不删除会无法正确判断
            if (content == null || content == '' || content == '# 在这里写下一篇博客') {
                alert("暂无需要保存的内容, 请编辑正文!");
                jQuery("#editor-markdown").focus();
                return false;
            }
            // 冻结保存
            jQuery("#save_sub").attr("disabled", "disabled");
            jQuery.ajax({
                url: '/article/savearticle',
                type: 'post',
                data: {
                    "title": title.val().trim(),
                    "description": description.val().trim(),
                    "content": content
                },
                success: function (res) {
                    if (res.code == 200 && res.data == 1) {
                        alert("保存草稿成功!");
                        location.href = "myblog_list1.html";
                    } else {
                        alert("保存失败 : " + res.mnsg);
                        jQuery("#save_sub").removeAttr("disabled");
                    }
                }
            });
        }


        // 获取md 编辑器内容
        // var markdowneditor = jQuery("#editor");
        // 绑定 input 监听事件

        // $('#editor').on('input', function () {

        //     //var timerId = setInterval(autoSaveArticle, 10000);
        // });


        var timeoutId = null;

        function onInputChange() {
            // 清除之前的定时器
            if (timeoutId) {
                clearTimeout(timeoutId);
            }
            // 创建新的定时器 -- 监听 md 文本框中的内容, 每隔十秒钟获取一次
            // 期间如果十秒内持续输出, 则重置计时器, 直到停止输入后执行自动保存
            timeoutId = setTimeout(autoSaveArticle, 10000);
        }

        // if (typeof timeoutId !== 'undefined') {
        //     clearTimeout(timeoutId);
        // }
        // // 用户输入内容三秒后触发自动保存, 三秒内持续输入, 则会重置定时器
        // var timeoutId = setTimeout(autoSaveArticle, 3000);

        // 生成一个唯一标识符, 供后端操作此时文章的同一条记录.
        var artuuid = Math.random().toString(36).substring(2);

        // 定时保存未正在编辑的文章, 未点击发布默认存入草稿.
        function autoSaveArticle() {
            // 1. 获取标题, 正文, 和摘要内容
            // 1. 获取标签内容
            var title = jQuery("#title");
            var content = editor.getValue(); // 获取 md 编辑窗口中的内容
            var description = jQuery("#description");

            console.log('正在保存...');
            // 发送请求给后端进行保存并设置状态为未发布状态
            jQuery.ajax({
                url: '/article/autosavearticle',
                type: 'post',
                data: {
                    "title": title.val().trim(),
                    "description": description.val().trim(),
                    "content": content,
                    'artuuid': artuuid
                },
                success: function (res) {
                    if (res.code == 200 && res.data > 0) {
                        console.log('保存成功!');

                    } else {
                        alert("保存失败")
                        console.log("自动保存失败");
                    }
                }
            });

        }

         // 十秒执行一次 autoSaveArticle 方法, 自动保存文章
        // 当不需要再次执行定时器时，可以通过 clearInterval 函数停止定时器
        // clearInterval(timerId);  
    </script>
</body>

</html>